<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h2>节点的层级关系</h2>
        <ul class="list">
            1231231233
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <!-- <li class="last">06</li> -->
        </ul>
    </div>
   
</body>
<script>
    // 节点 => JS中提出的 (W3C => 页面中的所有内容都是有节点组成的  -> 节点都是对象类型)
    // 文档  => 文档节点
    // 元素/标签  => 元素节点
    // 属性节点  html属性
    // 文本  => 文本节点
    // 注释  => 注释节点


    // 节点的层级关系
    // 父节点
    // 子节点
    // 同胞节点 

    var ul = document.querySelector(".list");
    var mid = document.querySelector(".mid");


    // 父节点 和 父元素  (元素节点通常作为父节点/父元素)
    // ul.parentNode     父节点
    // ul.parentElement  父元素

    // console.log(ul.parentNode);    // 父节点(wrap元素节点)
    // console.log(ul.parentElement); // 父元素(wrap元素节点)

    // html的父节点 => 文档节点
    // html的父元素 => null  (html根元素)

    // 链式写法
    // console.log(ul.parentNode.parentNode);
    // console.log(ul.parentNode.parentNode.parentNode);
    // console.log(ul.parentNode.parentNode.parentNode.parentNode);

    // console.log(ul.parentElement.parentElement);
    // console.log(ul.parentElement.parentElement.parentElement);
    // console.log(ul.parentElement.parentElement.parentElement.parentElement);



    // 子节点 和 子元素
    // Element.childNodes  子节点(文本节点 元素节点 注释节点)
    // Element.children    子元素(元素节点)
    
    console.log(ul.childNodes);
    console.log(ul.children);
    // console.log(ul.childNodes[0]);


    // 第一个  子节点 和 子元素
    // Element.firstChild  第一个子节点   => ul.childNodes[0]
    // Element.firstElementChild  第一个子元素 => ul.children[0]
    // console.log(ul.firstChild);
    // console.log(ul.firstElementChild);

    // 最后一个  子节点 和 子元素
    // Element.lastChild  第一个子节点    => ul.childNodes[ul.childNodes.length-1]
    // Element.lastElementChild  第一个子元素  => ul.children[ul.childNodes.length-1]
    // console.log(ul.lastChild);
    // console.log(ul.lastElementChild);


    // 同胞节点  同级元素     

    // 前一个 同胞节点  同级元素    previous:先前的, 早先的      sibling 同胞 兄弟 姐妹
    // Element.previousSibling      前一个 同胞节点
    // Element.previousElementSibling   前一个 同级元素

    // console.log(mid);
    // console.log(mid.previousSibling);
    // console.log(mid.previousElementSibling);

    // 后一个 同胞节点  同级元素    sibling 同胞 兄弟 姐妹
    // Element.nextSibling      后一个 同胞节点
    // Element.nextElementSibling   后一个 同级元素
    // console.log(mid);
    // console.log(mid.nextSibling);
    // console.log(mid.nextElementSibling);


    console.log(mid.previousElementSibling.previousElementSibling);
    console.log(mid.nextElementSibling.nextElementSibling);



    




</script>
</html>